<template>
	<view class="page-container pb-0">
		<up-navbar fixed safeAreaInsetTop placeholder bgColor="transparent" @left-click="pageBack">
			<template #center>
				<zjy-navbar-tabs :tabs="tabs" @tabClick="handleTabChange" :activeId="activeId" />
			</template>
		</up-navbar>
		<zjy-search placeholder="搜索景点名称关键字" @search="search" />
		<zjy-filters :data="filterData" @close="filterClose" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-24"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view
					v-for="(item, index) in listData"
					:key="index"
					class="trip-item"
					@click="pageToTripDetail(item.id)"
				>
					<image :src="item.cover_url" class="cover" mode="aspectFill" />
					<view class="content">
						<view class="fs-32 font-bold text-2-ellipsis">
							{{ item.display_name }}
						</view>
						<view class="c-grey-86 mt-8 text-ellipsis" v-if="item.intro">{{ item.intro }}</view>
						<view class="mt-8 mb-12">
							<text class="score font-oppo">{{ scoreInCent(item.score_in_cent) }}分</text>
						</view>
						<zjy-labels :data="item.sale_tips" keyName="title" keyBgColor="border_color" />
						<view class="flex-a space-between">
							<view class="flex-a">
								<image
									v-if="item.store_self_employed"
									:src="imgBaseUrl + 'self-operated-icon.png'"
									class="self-employed mr-4"
								/>
								<text class="c-grey-86">{{ item.store_name }}</text>
								<text class="arrow-right ml-4"></text>
							</view>
							<view class="c-red">
								<text class="fs-20">&yen;</text>
								<text class="font-bold fs-32">{{ formatAmount(item.lowest_price_in_cent) }}</text>
								<text class="font-bold">起</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { $getTripList } from "@/api/trip"
import { SortList } from "@/components/zjy-filters/constant"
import zjyFilters from "@/components/zjy-filters/index.vue"
import { getAttributeGroupList, getTripEndPlaces, getTripStartPlaces } from "@/components/zjy-filters/service"
import { ProductTypes } from "@/constants/common"
import { scoreInCent } from "@/mixins/mixins"
import useCommonStore from "@/store/common"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"
import { pageBack, pageToTripDetail } from "@/utils/page-redirect"
import { formatAmount, today } from "@/utils/tools"
import { onLoad } from "@dcloudio/uni-app"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 176rpx)`
const activeId = ref("50")
const filterParams = ref<any>({
	businessType: "50",
	tourDate: today(),
})
const tabs = ref<ZjyTabItem[]>([
	{
		name: "一日游",
		id: "50",
	},
	{
		name: "多日游",
		id: "60",
	},
])

const handleTabChange = (id: string) => {
	activeId.value = id
	filterParams.value.businessType = id
	getListData(true)
}
const search = (searchKey: string) => {
	filterParams.value.searchKey = searchKey
	getListData(true)
}

//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	updateListParams,
	listData,
	searched,
	freshing,
} = freshLoadingRef
freshLoadingRef.listService.value = $getTripList
updateListParams.value = () => filterParams.value
//#endregion

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	filterParams.value = {
		...filterParams.value,
		...data,
	}
	getListData(true)
}
const initFilter = async () => {
	let tripStartPlaces: any = await getTripStartPlaces()
	let tripEndPlaces: any = await getTripEndPlaces()
	let attrList = await getAttributeGroupList({ type: ProductTypes.TRIP })
	filterData.value = [
		{
			title: "出发地",
			key: "depPlaceIdStr",
			type: "multiple",
			value: tripStartPlaces.find((item: any) => item.all)?.id,
			data: tripStartPlaces,
		},
		{
			title: "目的地",
			key: "destPlaceIdStr",
			type: "multiple",
			value: tripEndPlaces.find((item: any) => item.all)?.id,
			data: tripEndPlaces,
		},
		{
			title: "综合排序",
			key: "orderingType",
			type: "single",
			value: SortList[0].id,
			data: SortList,
		},
		{
			title: "筛选",
			key: "attributeIdStr",
			type: "group",
			data: attrList,
		},
	]
}
//#endregion
onLoad(() => {
	initFilter()
	getListData()
})
</script>

<style scoped lang="scss">
.trip-item {
	padding-bottom: 28rpx;
	display: flex;
	position: relative;
	& + .trip-item {
		padding-top: 28rpx;
		&::before {
			position: absolute;
			content: "";
			top: 0;
			left: 244rpx;
			right: 0;
			height: 1rpx;
			background: $c-grey-e5;
		}
	}
	.cover {
		width: 224rpx;
		height: auto;
		border-radius: 16rpx;
	}
	.content {
		margin-left: 20rpx;
		width: calc(100% - 244rpx);

		.score {
			color: $brown-7c;
			font-weight: bold;
			position: relative;

			&::after {
				content: "";
				display: block;
				width: 40rpx;
				height: 10rpx;
				position: absolute;
				left: 0;
				bottom: 2rpx;
				background: linear-gradient(90deg, rgba(219, 157, 15, 0.4) 0%, rgba(219, 157, 15, 0) 97%);
			}
		}
		.self-employed {
			width: 68rpx;
			height: 28rpx;
		}
	}
}
</style>
